<template>
  <page-header-wrapper>
    <a-card>
      <!--搜索区域-->
      <div class='table-page-search-wrapper'>
        <a-form layout='inline'>
          <a-row :gutter='48'>
            <a-col :md='8' :sm='24'>
              <a-form-item label='操作名称'>
                <a-input v-model='queryParam.title' placeholder='请输入操作名称或关键字' />
              </a-form-item>
            </a-col>
            <a-col :md='8' :sm='24'>
              <a-form-item label='操作类型'>
                <a-select v-model='queryParam.businessType' placeholder='请选择操作类型'>
                  <a-select-option value='0'>获取验证码</a-select-option>
                  <a-select-option value='1'>登录</a-select-option>
                  <a-select-option value='2'>注册</a-select-option>
                  <a-select-option value='3'>批量注册</a-select-option>
                  <a-select-option value='4'>设置题目</a-select-option>
                  <a-select-option value='5'>更新题目</a-select-option>
                  <a-select-option value='6'>删除题目</a-select-option>
                  <a-select-option value='7'>新人提交题目</a-select-option>
                  <a-select-option value='8'>新人修改答案</a-select-option>
                  <a-select-option value='9'>管理员更新新人信息</a-select-option>
                  <a-select-option value='10'>判题人设置</a-select-option>
                  <a-select-option value='11'>删除判题人</a-select-option>
                  <a-select-option value='12'>判断题目</a-select-option>
                  <a-select-option value='13'>进行录取</a-select-option>
                  <a-select-option value='14'>未录取</a-select-option>
                  <a-select-option value='15'>分数线设置</a-select-option>
                  <a-select-option value='16'>答题时间设置</a-select-option>
                  <a-select-option value='17'>修改注册开关</a-select-option>
                  <a-select-option value='18'>系统邮件发送</a-select-option>
                  <a-select-option value='19'>文件导出</a-select-option>
                  <a-select-option value='20'>更新个人信息</a-select-option>
                  <a-select-option value='21'>分配新人</a-select-option>
                  <a-select-option value='22'>计算零分用户</a-select-option>
                  <a-select-option value='23'>删除工作人员作答记录</a-select-option>
                  <a-select-option value='24'>设置录取状态</a-select-option>
                  <a-select-option value='25'>删除操作日志</a-select-option>
                  <a-select-option value='26'>清空操作日志</a-select-option>
                  <a-select-option value='27'>文件上传</a-select-option>
                  <a-select-option value='28'>其它</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md='8' :sm='24'>
              <a-form-item label='操作人员姓名'>
                <a-input v-model='queryParam.operName' placeholder='请输入操作名称或关键字' />
              </a-form-item>
            </a-col>
            <!--展开区域 => 高级搜索功能-->
            <template v-if='advanced'>
              <a-col :md='8' :sm='24'>
                <a-form-item label='操作人IP'>
                  <a-input v-model='queryParam.operIp' placeholder='请输入操作地址或关键字' />
                </a-form-item>
              </a-col>
              <a-col :md='8' :sm='24'>
                <a-form-item label='操作状态'>
                  <a-select v-model='queryParam.status' placeholder='请选择操作状态'>
                    <a-select-option value='0'>成功</a-select-option>
                    <a-select-option value='1'>异常</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md='8' :sm='24'>
                <a-form-item label='操作日期'>
                  <a-range-picker @change='addDataQueryParam' style='width: 100%' />
                </a-form-item>
              </a-col>
            </template>
            <a-col :md='!advanced && 8 || 24' :sm='24'>
              <span class='table-page-search-submitButtons'
                    :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type='primary' @click='getLogList'>查询</a-button>
                <a-button style='margin-left: 8px' @click='() => this.queryParam = {}'>重置</a-button>
                <a @click='toggleAdvanced' style='margin-left: 8px'>
                  {{ advanced ? '收起' : '高级搜索' }}
                  <a-icon :type="advanced ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <br>
      
      
      <a-table
        :columns='columns'
        rowKey='operId'
        :pagination='pagination'
        bordered
        :loading='loading'
        @change='handleTableChange'
        :data-source='tableData'>
      
        <span slot='businessType' slot-scope='businessType'>
          <a-tag color='geekblue'>{{ businessType | statusTypeFilter }}</a-tag>
        </span>
        
        <span slot='status' slot-scope='status'>
          <a-tag :color='status === 0 ? "green" : "volcano"'>{{ status === 0 ? '成功' : '异常' }}</a-tag>
        </span>
        
        <template slot='action' slot-scope='text, record, index'>
          <a-button
            type='primary'
            @click='showLogInfoModal(record)'
            style='border-radius: 5px'>查看
          </a-button>
        </template>
      
      </a-table>
    </a-card>
    
    <a-modal
      width='20'
      title='日志信息'
      :centered='true'
      :visible='visible'
      @ok='handleOk'
      okText='确认'
      cancelText='取消'
      @cancel='handleOk'
    >
      <a-descriptions bordered>
        <a-descriptions-item label='操作名称'>
          {{ modalForm.title }}
        </a-descriptions-item>
        <a-descriptions-item label='请求地址'>
          {{ modalForm.operUrl }}
        </a-descriptions-item>
        <a-descriptions-item label='请求方式'>
          <a-tag color='skyblue'>
            {{ modalForm.requestMethod }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label='操作方法'>
          {{ modalForm.method }}
        </a-descriptions-item>
        <a-descriptions-item label='请求参数'>
          <a-tooltip>
            <template slot='title'>
              点击复制
            </template>
            <div style='width: 300px;' @click='copy(modalForm.operParam)'>
              {{ modalForm.operParam }}
            </div>
          </a-tooltip>
        
        </a-descriptions-item>
        <a-descriptions-item label='返回参数'>
          <div style='width: 300px;'>
            <a-tooltip>
              <template slot='title'>
                点击复制
              </template>
              <div style='width: 300px;' @click='copy(modalForm.jsonResult)'>
                {{ modalForm.jsonResult }}
              </div>
            </a-tooltip>
          </div>
        </a-descriptions-item>
        <a-descriptions-item label='操作状态'>
          <a-tag :color='modalForm.status === 0 ? "green" : "volcano"'>{{ modalForm.status === 0 ? '成功' : '异常' }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label='异常信息'>
          {{ modalForm.errorMsg }}
        </a-descriptions-item>
        <a-descriptions-item label='操作时间'>
          {{ modalForm.operTime }}
        </a-descriptions-item>
      </a-descriptions>
    </a-modal>
  
  </page-header-wrapper>
</template>

<script>
import { getLogList } from '@/api/log'

const statusMap = {
  0: {
    text: '获取验证码'
  },
  1: {
    text: '登录'
  },
  2: {
    text: '注册'
  },
  3: {
    text: '批量注册'
  },
  4: {
    text: '设置题目'
  },
  5: {
    text: '更新题目'
  },
  6: {
    text: '删除题目'
  },
  7: {
    text: '新人提交题目'
  },
  8: {
    text: '新人修改答案'
  },
  9: {
    text: '管理员更新新人信息'
  },
  10: {
    text: '判题人设置'
  },
  11: {
    text: '删除判题人'
  },
  12: {
    text: '题目评分'
  },
  13: {
    text: '进行录取'
  },
  14: {
    text: '未录取'
  },
  15: {
    text: '分数线设置'
  },
  16: {
    text: '答题时间设置'
  },
  17: {
    text: '修改注册开关'
  },
  18: {
    text: '系统邮件发送'
  },
  19: {
    text: '文件导出'
  },
  20: {
    text: '更新个人信息'
  },
  21: {
    text: '分配新人'
  },
  22: {
    text: '计算零分用户'
  },
  23: {
    text: '删除工作人员作答记录'
  },
  24: {
    text: '设置录取状态'
  },
  25: {
    text: '删除操作日志'
  },
  26: {
    text: '清空操作日志'
  },
  27: {
    text: '文件上传'
  },
  28: {
    text: '其他'
  }
}

const columns = [
  {
    title: '日志编号',
    dataIndex: 'operId',
    scopedSlots: { customRender: 'operId' }
  },
  {
    title: '描述',
    dataIndex: 'title',
    scopedSlots: { customRender: 'title' }
  },
  {
    title: '操作类型',
    dataIndex: 'businessType',
    scopedSlots: { customRender: 'businessType' }
  },
  {
    title: '操作人员',
    dataIndex: 'operName',
    scopedSlots: { customRender: 'operName' }
  },
  {
    title: '操作地址',
    dataIndex: 'operIp',
    scopedSlots: { customRender: 'operIp' }
  },
  {
    title: '操作状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作时间',
    dataIndex: 'operTime',
    scopedSlots: { customRender: 'operTime' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    width: 150,
    fixed: 'right'
  }
]

export default {
  name: 'Log',
  components: {},
  data() {
    return {
      columns,
      tableData: [],
      loading: true,
      visible: false,
      advanced: false,
      modalForm: {},
      
      // 查询参数
      queryParam: {},
      // 分页参数
      pagination: {
        size: 'large',
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '15', '20'],//可选的页面显示条数
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        }, //展示每页第几条至第几条和总数
        hideOnSinglePage: false, // 只有一页时是否隐藏分页器
        showQuickJumper: true, //是否可以快速跳转至某页
        showSizeChanger: true //是否可以改变pageSize
      }
    }
  },
  created() {
    this.getLogList()
  },
  filters: {
    statusTypeFilter(type) {
      return statusMap[type].text
    }
  },
  methods: {
    getLogList() {
      this.loading = true
      getLogList(this.queryParam).then(response => {
        this.tableData = response.rows
        this.pagination.total = response.total
      })
      this.loading = false
    },
    // 展示对话框
    showLogInfoModal(data) {
      this.visible = true
      this.modalForm = data
    },
    handleOk() {
      this.visible = false
    },
    //表格改变时触发
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      // 添加分页参数
      this.queryParam.pageNum = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      
      this.getLogList()
    },
    // 展开高级搜索功能
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    addDataQueryParam(date, dataList) {
      this.queryParam.startTime = dataList[0]
      this.queryParam.endTime = dataList[1]
    },
    copy(copyResult) {
      //创建input标签
      var input = document.createElement('input')
      //将input的值设置为需要复制的内容
      input.value = copyResult
      //添加input标签
      document.body.appendChild(input)
      //选中input标签
      input.select()
      //执行复制
      document.execCommand('copy')
      //成功提示信息
      this.$message.success('复制成功 可到 [ https://www.json.cn/ ] 中进行解析')
      //移除input标签
      document.body.removeChild(input)
    }
  }
}
</script>

<style scoped>

</style>